<template>
    <div class="main">
        <el-header style="margin-top: 12px; min-width: 901px;">
            <span style=" margin-right: 15px;">编码:</span>
            <el-input style="width: 180px;" size="small" placeholder="请输入编码" v-model="queryInfo.code"></el-input>
            <span style="margin-left: 25px; margin-right: 15px;">名称:</span>
            <el-input style="width: 180px;height: 32px;" size="small" placeholder="请输入名称"
                v-model="queryInfo.name"></el-input>
            <el-button type="primary" size="small" style="margin-left: 15px;"
                @click="getassignmentList()">查询</el-button>
            <el-button size="small" @click="resetForm()">重置</el-button>
            <el-button type="text" icon="el-icon-arrow-down">展开</el-button>
        </el-header>
        <el-main style="padding: 0;">
            <el-row>
                <el-col :span="24">
                    <el-button type="text" style="padding: 0 15px;margin: 0 8px 8px 0;" @click="addList">新增</el-button>
                    <el-button type="text" style="padding: 0 15px;margin: 0 8px 8px 0;">导出</el-button>
                    <el-button type="text" style="padding: 0 15px;margin: 0 8px 8px 0;">导入</el-button>
                    <el-button type="danger" size="small" v-show="multipleSelection.length > 0">批量删除</el-button>
                </el-col>
            </el-row>
            <!-- 数据渲染部分 -->
            <el-table :data="tableData" style="width: 100%" border @selection-change="handleSelectionChange"
                ref="multipleTable">
                <!-- 添加全选和单选列 -->
                <el-table-column type="selection" width="55" />

                <!-- 自动生成序号 -->
                <el-table-column label="序号" type="index" :index="indexAdd" width="50" />
                <el-table-column label="模板CODE" width="180">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.templateCode }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="模板标题" width="200" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.templateName }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="模板内容" width="180" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.templateContent }}</span>
                        <!-- <span v-html="scope.row.templateContent"></span> -->
                    </template>
                </el-table-column>
                <el-table-column label="模板类型" width="180">
                    <template slot-scope="scope">
                        <span v-show="scope.row.templateContent == '4'">系统</span>
                        <span v-show="scope.row.templateContent == '3'">微信</span>
                        <span v-show="scope.row.templateContent == '2'">信息</span>
                        <span v-show="scope.row.templateContent == '1'">邮件</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="150" fixed="right">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
                        <el-button type="danger" size="mini" @click="DeleteTi(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 添加或者编辑募捐团队模态框 -->
            <el-dialog :title="id ? '修改' : '新增'" :visible.sync="dialogFormVisible">
                <el-form :model="addassignment" ref="addassignment" label-width="100px" class="demo-ruleForm"
                    size="small">
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="模板CODE">
                                <el-input v-model="addassignment.templateCode"></el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :span="12">
                            <el-form-item label="模板类型">
                                <el-select v-model="addassignment.templateType" placeholder="请选择" style="width: 100%;">
                                    <el-option v-for="item in optionsA" :key="item.value" :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="模板标题">
                                <el-input v-model="addassignment.templateName"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="模板标题">
                                <quill-editor
                                ref="myQuillEditor"
                                v-model="addassignment.templateContent"
                                :options="editorOptions"
                            ></quill-editor>
                            </el-form-item>
                        </el-col>

                    </el-row>

                    <el-form-item>
                        <el-button v-if="id" type="primary" @click="editForm()">修改</el-button>
                        <el-button v-else type="success" @click="addForm()">添加</el-button>
                        <el-button @click="resetForm()">取消</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>








            <pagination :page="queryInfo.pageNo" :componentTotal="total" @changeRows="setRows" @changePage="setPage">
            </pagination>
        </el-main>
    </div>
</template>

<script>
import Pagination from "../Pagination";
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
export default {
    data() {
        return {
            id: '',
            visible: true,//删除的弹框
            dialogFormVisible: false,
            total: 0,
            queryInfo: {
                _t: new Date().getTime(),
                column: 'createTime',
                order: 'desc',
                code: '',
                name: '',
                field: 'id,billNo,billDate,customerId_dictText,isRubric_dictText,amt,checkedAmt,deductedAmt,billProcStatus_dictText,isApproved_dictText,isClosed_dictText,isVoided_dictText,remark,effectiveTime,approverId_dictText,flowId,createTime,createBy_dictText,sysOrgCode_dictText,updateTime,updateBy_dictText,action',
                pageNo: 1,
                pageSize: 10
            },

            //获取到的数据列表  
            tableData: [],
            addassignment: {
                "templateType": "4",
                "templateCode": "模板CODE1",
                "templateName": "模板标题",
                "templateContent": "<p>AaA</p>"
            },
            options: [
                { value: '0', label: '未发送' },
                { value: '1', label: '发送成功' },
                { value: '2', label: '发送失败' },
            ],
            optionsA: [
                { value: '0', label: '系统' },
                { value: '1', label: '短信' },
                { value: '2', label: '邮件' },
                { value: '3', label: '微信' },
            ],
            regionOptions: [],
            multipleSelection: [],//批量操作
            // 工具栏配置
            editorOptions: {
        placeholder: '请输入文本',
        theme: 'snow', // 主题样式，可选值：'snow'和'bubble'
        modules: {
          toolbar: [
            [{ 'header': [1, 2, 3, false] }],
            ['bold', 'italic', 'underline', 'strike'],
            [{ 'color': [] }, { 'background': [] }],
            [{ 'align': [] }],
            ['link', 'image', 'video'],
            ['blockquote', 'code-block'],
            [{ 'list': 'ordered' }, { 'list': 'bullet' }],
            ['clean']
          ]
        }
      }

        }
    },
    methods: {

        
        quillEditorFocus(event) {//富文本的获得焦点事件
   		// 在这里可以设置富文本编辑器是否可编辑
   		//event.enable(false);//不可输入和编辑
   		event.enable(true);//可以输入和编辑
    },






        //查询数据渲染列表
        async getassignmentList() {
            const { data: res } = await this.axios.get("message/sysMessageTemplate/list", {
                params: this.queryInfo,
            });
            if (res.code != 200) return this.$message.error(res.message);
            this.tableData = res.result.records;
            this.total = res.result.total;
        },
        //初始化数据
        addList() {
            this.addassignment = {
                "templateType": "",
                "templateCode": "",
                "templateName": "",
                "templateContent": ""
            };
            this.dialogFormVisible = true;
        },
        //新增数据
        async addForm() {
            const { data: res } = await this.axios.post("message/sysMessageTemplate/add", this.addassignment);
            if (res.code != 200) return this.$message.error("新增录入失败");
            this.$message.success("新增录入成功");
            this.dialogFormVisible = false;
            this.getassignmentList();
        },
        //编辑---【数据回显】
        handleEdit(row) {
            // console.log(index, row);
            this.id = row.id;
            this.addassignment = row;
            this.dialogFormVisible = true;
        },
        //编辑数据
        async editForm() {
            const { data: res } = await this.axios.put("message/sysMessageTemplate/edit", this.addassignment);
            if (res.code != 200) return this.$message.error("编辑失败");
            this.$message.success("编辑成功");
            this.dialogFormVisible = false;
            this.getassignmentList();
        },
        //删除提示操作
        DeleteTi(row) {
            this.$confirm(`此操作将永久删除该数据, 是否继续?`, "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                this.handleDelete(row.id);
            });
        },
        //删除操作
        async handleDelete(id) {
            const { data: res } = await this.axios.delete(`message/sysMessageTemplate/delete`, {
                params: { id: id }
            });
            if (res.code != 200) return this.$message.error("删除失败");
            this.$message.success("删除成功");
            this.getassignmentList();
        },
        //全选单选
        handleSelectionChange(val) {
            this.multipleSelection = val;
            console.log('选中的行:', val);
        },
        //重置数据
        resetForm() {
            this.queryInfo = {
                _t: new Date().getTime(),
                column: 'createTime',
                order: 'desc',
                code: '',
                name: '',
                field: 'id,billNo,billDate,customerId_dictText,isRubric_dictText,amt,checkedAmt,deductedAmt,billProcStatus_dictText,isApproved_dictText,isClosed_dictText,isVoided_dictText,remark,effectiveTime,approverId_dictText,flowId,createTime,createBy_dictText,sysOrgCode_dictText,updateTime,updateBy_dictText,action',
                pageNo: 1,
                pageSize: 10
            };
            this.getassignmentList()
        },
        // 分页器
        setRows(val) {
            this.queryInfo.pageSize = val;
            this.getassignmentList();
        },
        setPage(val) {
            this.queryInfo.page = val;
            this.getassignmentList();
        },
        //自动增加序号
        indexAdd(index) {
            const page = this.queryInfo.pageNo // 当前页码
            const pagesize = this.queryInfo.pageSize // 每页条数
            return index + 1 + (page - 1) * pagesize
        }
    },
    mounted() {
        this.getassignmentList();
    },
    components: {
        Pagination,
        quillEditor
    },

}
</script>

<style lang="scss" scoped>
::v-deep .el-drawer.rtl {
    padding: 10px 20px;
    width: 50% !important;
}

::v-deep .el-tooltip__popper {
    font-size: 14px;
    width: 50%;
}
.quill-editor {
  margin: 0 auto;
  height: 20vw;
  padding-bottom: 6.5vw;
}
.editor {
  line-height: normal !important;
  height: 800px;
}
.ql-snow .ql-tooltip[data-mode="link"]::before {
  content: "请输入链接地址:";
}
.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
  border-right: 0px;
  content: "保存";
  padding-right: 0px;
}
.ql-snow .ql-tooltip[data-mode="video"]::before {
  content: "请输入视频地址:";
}
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
  content: "14px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
  content: "10px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
  content: "18px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
  content: "32px";
}
.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
  content: "文本";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  content: "标题1";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  content: "标题2";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  content: "标题3";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  content: "标题4";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  content: "标题5";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  content: "标题6";
}
/* 设置显示隐藏部分内容，按40%显示 */
</style>